<template>
    <div class="chart-bordered" style="width:100%;height:100%;">
        <div class="container">
            <h3>{{title}}</h3>
            <div v-if="isShowLabel==false" class="echarts-container" ref="echartsWape" :style="{'height':echartsHeight}"></div>
            <el-row v-else>
                <el-col :sm="12">
                    <div class="echarts-container" ref="echartsWape" :style="{'height':echartsHeight}"></div>
                </el-col>
                <el-col :sm="12">
                    <el-row style="margin-top:60px;">
                        <template v-for="(item,index) in seriesData">
                            <el-col :span="12" class="list-exception" :key="index">
                                <em :style="{'background-color':colorList[index]}"></em>{{seriesData[index].name}}　　
                                <span id="spnoreg">{{seriesData[index].value}}</span>
                            </el-col>
                        </template>
                    </el-row>
                </el-col>
            </el-row>
        </div>
        <span class="border-top-left"></span>
        <span class="border-top-right"></span>
        <span class="border-bottom-left"></span>
        <span class="border-bottom-right"></span>
    </div>
</template>

<script>
import * as $http from '@/api/dashboard';
export default {
    name: 'pieEcharts',
    props: {
        title: {
            type: String,
            required: true
        },
        echartsHeight: {
            type: String,
            required: true
        },
        isShowLabel:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            mainChart: null,
            colorList:['#0487ed', '#3eb177', '#c1c049', '#c59838', '#cd6237', '#e11000',
                    '#aa00a0','#59057b','#ffa96a','#7da87b','#84f2d6','#53c7f0','#005585','#2931b3','#0666e8'],
            xAxisArr:[],
            seriesData:[],
        };
    },
    destroyed() {
        if (this.mainChart) {
            this.mainChart.dispose();
        }
    },
    mounted() {

    },
    methods: {
        // 随机生成十六进制颜色
        randomHexColor() {
            var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
            while (hex.length < 6) {
                //while循环判断hex位数，少于6位前面加0凑够6位
                hex = '0' + hex;
            }
            return '#' + hex; //返回‘#'开头16进制颜色
        },

        // 渲染图表
        echartRender: function(data, xAxisArr) {
            let _this = this;
            let mainChart = this.$echarts.init(this.$refs.echartsWape, 'dark');
            var option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    show: false,
                    x: 'left',
                    data: xAxisArr
                },
                grid: {
                    bottom: '10%',
                    containLabel: true
                },
                series: [
                    {
                        name: '异常与报警',
                        type: 'pie',
                        radius: ['35%', '60%'],
                        center: ['50%', '50%'],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    if(params.dataIndex>=_this.colorList.length){
                                        _this.colorList.push(_this.randomHexColor());
                                    }
                                    return _this.colorList[params.dataIndex];
                                }
                            }
                        },
                        data: data
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            if (option && typeof option === 'object') {
                mainChart.setOption(option, true);
            }
            this.mainChart = mainChart;
        },

        // 图表设置数据
        setData(seriesData, xAxisArr){
            let _this = this;
            if (this.mainChart && typeof this.mainChart.setOption == 'function') {
                this.mainChart.setOption({
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['35%', '60%'],
                            center: ['50%', '50%'],
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        if(params.dataIndex>=_this.colorList.length){
                                            _this.colorList.push(_this.randomHexColor());
                                        }
                                        return _this.colorList[params.dataIndex];
                                    }
                                }
                            },
                            data: seriesData
                        }
                    ]
                });
                this.seriesData = seriesData;
            } else {
                this.echartRender(seriesData,xAxisArr);
                this.seriesData = seriesData;
                this.xAxisArr = xAxisArr;
            }
        }
    }
};
</script>
<style scoped>
.echarts-container {
    width: 100%;
}
.chart-bordered {
    background: url('~@/assets/dashboard-img/echart-bg.png');
    border: 1px solid #144277;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    height: 100%;
    width: 100%;
}

.border-top-left,
.border-top-right,
.border-bottom-left,
.border-bottom-right {
    position: absolute;
    width: 10px;
    height: 10px;
    line-height: 10px;
    display: block;
}

.border-top-left {
    left: 0;
    top: 0;
    border-left: solid 2px #0e68b1;
    border-top: solid 2px #0e68b1;
}

.border-top-right {
    right: 0;
    top: 0;
    border-right: solid 2px #0e68b1;
    border-top: solid 2px #0e68b1;
}

.border-bottom-left {
    left: 0;
    bottom: 0;
    border-left: solid 2px #0e68b1;
    border-bottom: solid 2px #0e68b1;
}

.border-bottom-right {
    right: 0;
    bottom: 0;
    border-right: solid 2px #0e68b1;
    border-bottom: solid 2px #0e68b1;
}

.list-exception {
    color: #fff;
    padding: 5px 10px 5px 40px;
    font-size: .8em;
}
.list-exception em {
    display: inline-block;
    margin-right: 8px;
    width: 6px;
    height: 6px;
    background-color: #fff;
    vertical-align: middle;
    border-radius: 100%;
}
.list-exception{
    margin-bottom: 14px;
}
.list-exception > span{
    font-size: 18px;
}
</style>
